<template>
	<view>
		<uni-nav-bar fixed="true" title="修改群信息" color="#FFF" backgroundColor="#6869a8" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
			<view slot="right">
				<view class="isPost" @click="isSave = true">
					保存
				</view>
			</view>
		</uni-nav-bar>
		<view class="body">
			<view class="" style="text-align: center;">
				<u-avatar @click="selectImg" :src="group.avatar" size="140"
					:customStyle="{'margin':'0 auto','margin-top':'30rpx'}">
				</u-avatar>
				<view class="tip" @click="selectImg">点击修改头像</view>
			</view>
			<u-form labelPosition="left" :model="group" :rules="rule" labelWidth="auto" ref="form"
				:labelStyle="{'font-size':'40rpx','margin-right':'20rpx'}">
				<u-form-item label="群名称" prop="groupName" borderBottom ref="item1">
					<u--input fontSize='35' maxlength="14" v-model="group.groupName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="群描述" prop="description" borderBottom ref="item1">
					<u-textarea height='140' placeholder="输入群描述..." :placeholderStyle="{'font-size':'30rpx'}"
						v-model="group.description" border="none"></u-textarea>
				</u-form-item>
				<u-form-item label="进群方式" prop="description" borderBottom>
					<u-radio-group v-model="group.needVerify" placement="column">
						<u-radio activeColor="#6869a8" customStyle="margin:20rpx 0" :size="37" :iconSize="37"
							:labelSize="37" v-for="(item,index) in verfy" :key="index" :label="item.name"
							:name="item.type">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
			<u-modal :show="isSave" title="温馨提示" content="是否保存信息修改?" width="500rpx" @confirm="save"
				@cancel="isSave = false" showCancelButton confirmColor="#6869a8">
			</u-modal>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				group: {},
				rule: {
					'groupName': {
						type: 'string',
						required: true,
						message: '请填写群名称',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'string',
						required: false,
					}
				},
				verfy: [{
					name: "任何人都可加入",
					type: 0
				}, {
					name: "经审核加入",
					type: 1
				}, {
					name: "不可加入",
					type: 2
				}],
				isSave: false
			}
		},
		onLoad(option) {
			this.group = JSON.parse(option.group)
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			save() {
				// console.log(this.group)
				this.$refs.form.validate().then(res => {
					this.$request.TokenRequest({
						url: "/group/updateGroupInfo"
					}, this.group).then(res => {
						if (res.state === 200) {
							uni.showToast({
								icon: "success",
								title: "修改成功!",
								success() {
									uni.navigateBack({})
								}
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.message
							})
						}
					})
				})
			},
			selectImg() {
				let self = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success(res) {
						// console.log(JSON.stringify(res.tempFilePaths))
						self.uploadImg(res.tempFilePaths[0])
					}
				})
			},
			uploadImg(imgpath) {
				this.$util.uploadFile(imgpath).then(res => {
					this.group.avatar = res
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: "头像上传失败"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.isPost {
		background-color: #474881;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 5rpx 18rpx;
		border-radius: 10rpx;
	}

	.body {
		width: 90%;
		margin: 15rpx auto;
	}

	.tip {
		font-size: 30rpx;
		margin: 40rpx 0;
		color: #82878B;
	}

	/deep/ .u-textarea__field {
		font-size: 30rpx;
	}
</style>
